<!DOCTYPE html>
<html>

    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" />
        <meta charset="UTF-8">
        <title>{$site_info.site_name|default=''}</title>
        <meta name="keywords" content="{$site_info.site_seo_keywords|default=''}"/>
        <meta name="description" content="{$site_info.site_seo_description|default=''}">
        <include file="public@head"/>
    </head>
    <body>
		
		<div class="repairs room">
			
			<!--头部-->
			<div class="top" style="background: url({:cmf_get_image_url($img['img'])}) no-repeat;background-size: 100% 100%;">
				<p>我的报修</p>
			</div>
			
			<div class="repairdCn">
				<div class="rpList">
					<div class="rpTop div_float bigTop">
						<p class="rpTil eli_one"><span></span>{$repair_info.post_title}</p>
					</div>
					<div class="rpBtm">
						<div class="div_float">
							<p>类型 ：{$repair_info.category_name}</p>
							<p>{$repair_info.member_info.department}  / {$repair_info.member_info.user_login}</p>
							<p>地点：{$repair_info.repair_place}</p>
						</div>
					</div>
					<!-- <form method="POST" action='{:cmf_url('repair/List/addRepairPost')}' onsubmit="return formSubmit();" id="theForm" enctype="multipart/form-data"> -->
					<div class="rpBd pInfo">
						<div class="Cn">
							<div class="l remark">
							 	<span class="gznr"></span><label>故障情况：</label>
							 	<textarea name="post_content" id="post_content"></textarea>
							</div>
							<div class="l div_float">
							 	<span class="bxlx"></span><label>设置状态： </label>
							 	<div class="rpType">
							 		<input type="radio" name="repair_status" checked="checked" value="4" />完成
							 	</div>
							</div>
							<div class="l">
							 	<span class="gztp"></span><label>维修照片：</label>
							 	<div class="takePto">
							 		<p>拍照上传</p><span></span>
							 	</div>
							 	<input type="file" accept="image/*" class="photoInput divHide" />
							</div>
							<div class="photo div_float">
								
						 	</div>
						 	<div>
						 		<input type="hidden" name="repair_id" value="{$id}" id="repair_id">
								<button class="pSubmit" onclick="formSubmit()">立即提交</button>
							</div>
						</div>
					</div>
					<!-- </form> -->
				</div>
			</div>
			
			<!--公共底部-->
			<include file='public@footer'/>
			
		</div>
		
	</body>
	<include file='public@scripts'/>
	<script type="text/javascript" src="__TMPL__/public/assets/js/lrz.all.bundle.js" ></script>
	<script>
		var imgs = [];
		$(function(){
			$("#faType").click(function() {
				var that = this;
				$("#faType-list").mobiscroll().treelist({
					theme: "android-ics",
					lang: "zh",
					display: 'bottom',
					headerText: '请您选择',
					onSelect: function(valueText) {
						var m = $(this).find("li").eq(valueText).html();
						$(that).val(m);
						$('#faTypeText').html(m)
					}
				});
				$("input[id^=faType-list]").focus();
			});
			
			$('.takePto').on('click',function(){
				var numLen = $('.photo>div').length;
				if(numLen < 3){
					$('.photoInput').click();
				}else{
					alert('最多上传3张凭证！')
				}
			});
			
			$('.photoInput').change(function() {
				// if($(this)[0].files[0].size>1048576){
				// 	alert('请上传100*100像素 或者大小小于1M的图片')
				// }else{
					lrz(this.files[0], {
						width: 1024
					})
					.then(function(rst) {
						// 把处理的好的图片给用户看看呗（可选）
						var img = new Image();
						img.src = rst.base64; //base64字符串
						
			            renderPhoto(rst.base64);
						
					});
				//}
			});
		})
		
		
		//渲染图片 para:最新选择图片的base64
		function renderPhoto(para){
			var newImg = para;
			var oldImg = [];
			if(newImg != "null" || typeof(newImg) == 'object'){
				
				if(typeof(newImg) == 'object'){
					$.each(newImg, function(index,item) {
						console.log()
						oldImg.push($(this)[0]);
					});
				}else{
					oldImg.push(newImg);
					$.each($('.photo>div'), function(index,item) {
						oldImg.push($(this).find('img').attr('src'));
					});
				}
			}
			
			
			
			$('.photo').empty();
			
			if(oldImg.length>0){
				$.each(oldImg,function(index,item){
					var temp = '<div class="tpList">';
					temp += '<img src="'+item+'" /><span onclick="delPhoto($(this))" value="'+index+'">×</span>';
					temp += '<input type="hidden" name="imgBase64[]" value="'+item+'"/>';
					temp += '</div>';
					$('.photo').append(temp);
				})
			}

			imgs = oldImg;
			
		}
		
		//删除图片
		function delPhoto(para){
			var cIndex = parseInt(para.index())-1;
			var oldImg = [];
			var newImg = [];
			
			$.each($('.photo>div'), function(index,item) {
				oldImg.push($(this).find('img').attr('src'));
			});
			
			$.each(oldImg,function(index,item){
				if(cIndex != index){
					newImg.push(item)
				}
			})
			
			para.parent().remove();
			
			
			if(newImg.length>0){
				renderPhoto(newImg);
			}else{
				renderPhoto('null');
			}

			imgs = newImg;
				
		}

		//检查填写内容是否完整
		function formSubmit(){
			var img = imgs;
			var post_content = $('#post_content').val();
			var repair_id = $('#repair_id').val();
			var photo_count = 0;
			$(".photo").find('input').each(function(){
				photo_count = photo_count+1
			});

			if (post_content == "") {
				alert("请输入故障内容");
				return false;
			}

			if (photo_count <= 0) {
				alert("请上传故障图片");
				return false;
			}
			
			$.ajax({
				url:"{:url('addRepairPost')}",
				type:'post',
				dataType:'json',
				data:{
					img:img,
					post_content:post_content,
					repair_id:repair_id,
				},
				success:function(data) {
					if (data.status == 0) {
		    			alert(data.msg);
		    		}else{
		    			alert(data.msg);
		    			window.location.href=data.url;
		    		}
				},
				error:function() {
					alert('网络异常');
				}
			});
		}
	</script>
</html>
